<template>
	<el-container style="height: 100vh;">

		<el-aside v-model="num" :style="{backgroundColor:' #545c64', height:'100vh ',width:num+'px'}">

			<el-menu :collapse-transition='false' default-active="home" :collapse="isCollapse"
				class="el-menu-vertical-demo" unique-opened background-color="#545c64" style="border-right: none;"
				text-color="#fff" router active-text-color="#ffd04b">
				<el-menu-item index="home">
					<i class="el-icon-s-home"></i>
					<span slot="title">首页</span>
				</el-menu-item>
				<el-menu-item index="Xiaoqu">
					<i class="el-icon-office-building"></i>
					<span slot="title">小区管理</span>
				</el-menu-item>
				<el-submenu index="3">
					<template slot="title">
						<i class="el-icon-coordinate"></i>
						<span>帮买取快递废品回收</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="store"><i class="el-icon-film"></i>门店管理</el-menu-item>
						<el-menu-item index="post"><i class="el-icon-film"></i>驿站管理</el-menu-item>
						<el-menu-item index="shangpin"><i class="el-icon-film"></i>商品管理</el-menu-item>
						<el-menu-item index="1-4"><i class="el-icon-film"></i>订单管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-menu-item index="4">
					<i class="el-icon-user"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>
			</el-menu>
		</el-aside>
		<el-container>
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
				<el-radio-button :label="false">展开</el-radio-button>
				<el-radio-button :label="true">收起</el-radio-button>
			</el-radio-group>
			<el-header style="color:grey;font-size: 50px;text-align: center;"><b>悟空到家</b></el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import {
		isCancel
	} from 'axios';
	"	"
	export default {
		data() {
			return {
				isCollapse: true,
				num: 200
			};
		},
		methods: {
			tc() {
				this.$router.push('/')
			},
			big() {
				this.num = 200
				console.log(num)
			},
			small() {
				this.num = 60
				console.log(num)
			}
		},
		mounted() {
			if (this.isCollapse) {
				this.num = 60
			} else {
				this.num = 200
			}
		},
		watch: {
			isCollapse() {
				if (this.isCollapse) {
					this.num = 60
				} else {
					this.num = 200
				}
			}
		}
	}
</script>

<style>
</style>